Project Overview
Product
A responsive web application to help people develop healthier exercise habits
Context
UI Specialization course project
Role
UI/UX designer
Length
3 months
This study project followed a user-centered design methodology. As the UI designer, my responsibility was to deliver a usability test-ready, high-fidelity digital prototype. This is how I approached each step of the design process for this project:
Now that my persona had come to life and her goals and needs were well-defined, I started working on the user flows.
Highlighted below is the flow for the simplest task: learn about different exercises.
I brainstormed solutions for each of the 3 user stories provided by the brief and translated those solutions into paper wireframes.
Story #1. “As a new user, I want to learn about different exercises, so that I can figure out what is best for me.”
Proposed solution:
• Exercises available from Home screen and presented by category
• Offer exercise filters based on user’s goals
Result:
Story #2. “As a new user, I want to be shown how the exercises are done, so that I know I’m doing them correctly.”
Proposed solution:
• Videos to demonstrate how to perform an exercise
Result:
Story #3. “As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.”
Proposed solution:
• Challenge-dedicated section
• Completing a challenge grants a reward
• Rewards can be converted to prizes
Result:
The visual direction I chose to compose the moodboard represents motivation through rewarding and fun activities.
The predominance of yellow, evokes optimism and success on the journey to build healthier habits.
The tones of blue trigger confidence and trustworthiness - communicating that Fitted is committed to the users goals as well.
As a unit, the visual direction highlights victory and competitiveness to encourage users to join challenges, invite friends and keep to their workout schedule to see results.
With the visual direction defined, I refined my mid-fidelity wireframes:
And then applied the colors and styles (and refined them a little bit more...):
As one of my deliverables was an animation, I wanted it to add to the motivating and fun personality of the app.
The concept is cheerful celebration, and it translates to an animated challenge icon in the mobile navigation bar that hops and turns golden when the user has performed a task in-app that led to the completion of a challenge.
Here it is:
For this project, I went for a mobile-first approach. Now that I had the mobile high fidelity wireframes defined, it was time to start considering other devices.
I designed for 2 additional breakpoints: tablet and desktop.
Once I had all my breakpoints designed, I moved on to consolidating my UI elements and design specifications in a style guide.
And here is the finished prototype for Fitted:
As expected, this project had its challenges. Here are the biggest ones and how I overcame (and learned from) them:
Research limitation:
The project description and timeline did not leave much room for field work.
With a background in sociology and a UX designer mind, this was particularly challenging for me, even though I was provided with secondary research data as a starting point.
But when I really wanted some input on a design choice I learned that I could resort to my friends.
Tool learning curve:
I considered myself independent enough with Figma, so I decided this project would be an opportunity to get more comfortable with Sketch.
That was a good decision... until I reached the prototyping stage. I had a clear idea of the interactions I wanted to add, but they just weren't working as I expected with the tools at my disposal.
Because of time limitations, I moved my work to Figma to prototype there - despite the extra time it would take to review and adjust the imported assets, it was worth it to meet my deadline.
I hope you enjoyed reading this case study as much as I enjoyed my journey up to this point.
Learning is an on-going process, and for the near future, I intend to enrich my journey with design challenges, readings and networking to exchange ideas with other designers.
Thank you for reading!
